<template>
  <div class="awsCenter" style="background-color: #f6f6f6;min-height: 100vh;">
    <!-- 主内容容器 -->
    <div
        style="
        width: 90%;
        margin: 30px auto 0;
        border-radius: 25px;
        background-color: white;
        min-height: calc(100vh - 60px);
        display: flex;
        flex-direction: column;


      "
    >
      <!-- 标题 + 查询区域 -->
      <div style="display: flex; align-items: center; margin: 20px 30px 0">
        <div style="display: flex; align-items: center; flex-shrink: 0">
          <span style="font-weight: bold; font-size: 20px">纹样库</span>
          <div
              style="
              width: 16px;
              height: 16px;
              background-color: #8adba0;
              border-radius: 50%;
              margin-left: 10px;
            "
          ></div>
        </div>

        <div
            style="
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-left: 20px;
            gap: 16px;
          "
        >
          <el-form-item label="纹样类型" style="margin-bottom: 0">
            <el-select v-model="queryForm.type" clearable style="width: 140px">
              <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="地域分布" style="margin-bottom: 0">
            <el-input v-model="queryForm.region" clearable style="width: 140px" />
          </el-form-item>
          <el-form-item label="工艺难度" style="margin-bottom: 0">
            <el-select v-model="queryForm.difficultyLevel" clearable style="width: 140px">
              <el-option
                  v-for="item in difficultyLevelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-button color="#ec8061" @click="loadPatternList" plain type="primary" style="flex-shrink: 0">
            查询
          </el-button>
        </div>
      </div>

      <!-- 卡片展示区 -->
      <div
          style="
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          padding: 0 20px 20px;
        "
      >
        <div
            v-if="patternList.length > 0"
            style="
            flex-grow: 1;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-top: 20px;
          "
        >
          <div
              v-for="item in patternList"
              :key="item.id"
              class="card"
              style="
              display: flex;
              flex-direction: column;
              border-radius: 16px;
              background: #fff;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
              overflow: hidden;
            "
          >
            <div
                style="
                width: 100%;
                aspect-ratio: 1 / 1;
                background-color: #f9f9f9;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
              "
            >
              <el-image
                  v-if="item.templateFilePath"
                  :src="item.templateFilePath"
                  style="width: 100%; height: 100%; object-fit: cover"
              />
              <el-icon v-else color="#aaa" size="40">
                <IconPicture />
              </el-icon>
            </div>

            <div
                style="
                padding: 16px;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
                background-color: #fafafa;
              "
            >
              <div style="display: flex; justify-content: space-between; align-items: flex-start">
                <span style="font-weight: 600; font-size: 16px; color: #333">{{ item.name }}</span>
                <el-tag size="small" effect="plain" style="font-size: 12px; padding: 2px 6px">
                  {{ item.difficultyLevel }}
                </el-tag>
              </div>

              <div style="margin-top: 10px; font-size: 14px; color: #666">
                <div>类型：{{ item.type }}</div>
                <div style="margin-top: 4px">地域：{{ item.region }}</div>
              </div>

              <div
                  style="
                  margin-top: 12px;
                  font-size: 13px;
                  color: #555;
                  line-height: 1.5;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                文化寓意：{{ item.culturalMeaning }}
              </div>

              <div class="awsCenter" style="margin-top: 16px">
                <el-button
                    type="primary"
                    color="#8adba0"
                    style="width: 100%"
                    @click="showDetail(item)"
                >
                  <span style="color: white">查看详情</span>
                </el-button>
              </div>
            </div>
          </div>
        </div>

        <div v-else class="awsCenter" style="flex-grow: 1">
          <el-empty description="暂无纹样数据" style="margin-top: 100px" />
        </div>

        <div class="awsCenter" style="margin-top: auto; padding-top: 20px">
          <el-pagination
              v-model:current-page="currentPage"
              :page-size="12"
              layout="total, prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 纹样详情弹窗 -->
    <el-dialog
        v-model="showDetailDialog"
        title="纹样详情"
        width="90%"
        max-width="1200px"
        top="80px"
        :modal="true"
        :close-on-click-modal="false"
        :close-on-press-escape="true"
        custom-class="pattern-detail-dialog"
        @close="currentDetail = null"
    >
      <div v-if="currentDetail" class="detail-content">
        <div class="detail-body">
          <!-- 左侧图片 -->
          <div class="image-section">
            <el-image
                :src="currentDetail.templateFilePath"
                :preview-src-list="[currentDetail.templateFilePath]"
                fit="contain"
                style="width: 100%; height: 100%; border-radius: 12px; background: #f9f9f9"
            />
          </div>

          <!-- 右侧信息 -->
          <div class="info-section">
            <el-descriptions :column="1" size="medium" border>
              <el-descriptions-item label="纹样名称">{{ currentDetail.name }}</el-descriptions-item>
              <el-descriptions-item label="类型">{{ currentDetail.type }}</el-descriptions-item>
              <el-descriptions-item label="地域分布">{{ currentDetail.region }}</el-descriptions-item>
              <el-descriptions-item label="工艺难度">{{ currentDetail.difficultyLevel }}</el-descriptions-item>
              <el-descriptions-item label="纹样角色">{{ currentDetail.patternRole }}</el-descriptions-item>
            </el-descriptions>

            <div class="text-block">
              <h4>文化寓意</h4>
              <p>{{ currentDetail.culturalMeaning }}</p>
            </div>

            <div class="text-block">
              <h4>历史背景</h4>
              <p>{{ currentDetail.historicalBackground }}</p>
            </div>

            <div class="text-block">
              <h4>工艺说明</h4>
              <p>{{ currentDetail.craftProcess }}</p>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer" style="display: flex; justify-content: flex-end; gap: 12px">
          <el-button @click="showDetailDialog = false">取消</el-button>
          <el-button type="primary" color="#8adba0" @click="downloadImage">
            <span style="color: white">立即下载</span>
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { getPatternList } from '@/api/patternLibrary.js'

const queryForm = ref({
  type: '',
  region: '',
  difficultyLevel: ''
})

const currentPage = ref(1)
const total = ref(0)
const patternList = ref<any[]>([])
const showDetailDialog = ref(false)
const currentDetail = ref<any>(null)

const typeList = ref([
  { value: '几何纹', label: '几何纹' },
  { value: '动物纹', label: '动物纹' },
  { value: '植物纹', label: '植物纹' },
  { value: '文字纹', label: '文字纹' },
  { value: '人物纹', label: '人物纹' },
  { value: '抽象纹', label: '抽象纹' }
])

const difficultyLevelList = ref([
  { value: '初级', label: '初级' },
  { value: '中级', label: '中级' },
  { value: '高级', label: '高级' }
])

const loadPatternList = async () => {
  const res = await getPatternList({
    current: currentPage.value,
    pageSize: 12,
    type: queryForm.value.type,
    region: queryForm.value.region,
    difficultyLevel: queryForm.value.difficultyLevel,
    status: '正常'
  })
  if (res.code === 200) {
    patternList.value = res.data.data || []
    total.value = res.data.total || 0
  }
}

const handleCurrentChange = (page: number) => {
  currentPage.value = page
  loadPatternList()
}

const showDetail = (item: any) => {
  currentDetail.value = item
  showDetailDialog.value = true
}

const downloadImage = () => {
  if (!currentDetail.value?.templateFilePath) {
    ElMessage.warning('图片地址无效')
    return
  }

  const url = currentDetail.value.templateFilePath
  const link = document.createElement('a')
  link.href = url

  let filename = url.split('/').pop()?.split('?')[0] || 'pattern.png'
  try {
    filename = decodeURIComponent(filename)
  } catch (e) {
    // ignore
  }
  link.download = filename

  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

onMounted(() => {
  loadPatternList()
})
</script>

<style scoped>
.awsCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* 弹窗样式：顶部紧贴，内容可滚动 */
:deep(.pattern-detail-dialog .el-dialog) {
  margin-top: 20px !important;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
}

:deep(.pattern-detail-dialog .el-dialog__header) {
  padding: 12px 20px !important;
  margin-bottom: 0;
}

:deep(.pattern-detail-dialog .el-dialog__body) {
  padding: 0 24px 24px !important;
  overflow-y: auto;
  flex: 1;
}

.detail-content {
  width: 100%;
  height: 100%;
}

.detail-body {
  display: flex;
  gap: 32px;
  height: calc(100% - 60px); /* 减去 footer 高度 */
  min-height: 400px;
}

.image-section {
  flex: 0 0 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.text-block h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.text-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #555;
  white-space: pre-wrap;
}
</style>